<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<!-- <view class="nav-left">
					<image src="/static/my/收起箭头小.png" class="nav-icon"></image>
				</view> -->
				<text class="nav-title">个人中心</text>
				<view class="nav-right" @click="goToPersonalInfo">
					<image src="/static/my/个人信息.png" class="nav-icon"></image>
				</view>
			</view>
		</view>

		<!-- 用户信息区域 -->
		<view class="user-profile-section">
			<view class="profile-content">
				<view class="profile-avatar">
					<image :src="userInfo.avatar" class="avatar-img" mode="aspectFill"></image>
				</view>
				<view class="profile-info">
					<text class="user-name" :class="{ 'unverified': !userInfo.name }">
						{{ userInfo.name || '请完善个人信息' }}
					</text>
					<text class="user-phone">{{ userInfo.phone || '未设置' }}</text>
				</view>
			</view>
		</view>

		<!-- 我的优惠券 -->
		<view class="coupon-section">
			<view class="coupon-item" @click="goToCoupons">
				<view class="coupon-left">
					<image src="/static/my/彩色-优惠券.png" class="coupon-icon"></image>
					<text class="coupon-text">我的优惠券</text>
				</view>
				<view class="coupon-right">
					<text class="coupon-count">3张</text>
					<image src="/static/my/收起箭头小 拷贝.png" class="arrow-icon"></image>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="orders-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<view class="all-orders" @click="goToAllOrders">
					<text class="all-orders-text">全部订单</text>
					<image src="/static/my/收起箭头小 拷贝.png" class="arrow-icon"></image>
				</view>
			</view>
			<view class="order-status-buttons">
				<view class="status-btn blue" @click="goToOrders('pending')">
					<text class="status-text">待支付</text>
				</view>
				<view class="status-btn orange" @click="goToOrders('using')">
					<text class="status-text">待使用</text>
				</view>
				<view class="status-btn light-blue" @click="goToOrders('evaluate')">
					<text class="status-text">待评价</text>
				</view>
			</view>
		</view>

		<!-- 我的服务 -->
		<view class="services-section">
			<view class="section-header">
				<text class="section-title">我的服务</text>
			</view>
			<view class="services-grid">
				<view class="service-item" @click="goToService('coupon')">
					<view class="service-icon blue">
						<image src="/static/my/组 9(3).png" class="service-img"></image>
					</view>
					<text class="service-label">领券中心</text>
				</view>
				<view class="service-item" @click="goToService('invite')">
					<view class="service-icon green">
						<image src="/static/my/组 9(4).png" class="service-img"></image>
					</view>
					<text class="service-label">邀请好友</text>
				</view>
				<view class="service-item" @click="goToService('vehicle')">
					<view class="service-icon orange">
						<image src="/static/my/组 9(5).png" class="service-img"></image>
					</view>
					<text class="service-label">我的车辆</text>
				</view>
				<view class="service-item" @click="goToService('consumption')">
					<view class="service-icon blue">
						<image src="/static/my/组 9(6).png" class="service-img"></image>
					</view>
					<text class="service-label">消费记录</text>
				</view>
				<view class="service-item" @click="goToService('repair')">
					<view class="service-icon purple">
						<image src="/static/my/组 9(7).png" class="service-img"></image>
					</view>
					<text class="service-label">我的维修</text>
				</view>
				<view class="service-item" @click="goToService('feedback')">
					<view class="service-icon orange">
						<image src="/static/my/组 9(8).png" class="service-img"></image>
					</view>
					<text class="service-label">意见反馈</text>
				</view>
				<view class="service-item" @click="goToService('address')">
					<view class="service-icon green">
						<image src="/static/my/组 9(9).png" class="service-img"></image>
					</view>
					<text class="service-label">收货地址</text>
				</view>
				<view class="service-item" @click="goToService('message')">
					<view class="service-icon green">
						<image src="/static/my/实名认证.png" class="service-img"></image>
					</view>
					<text class="service-label">实名认证</text>
				</view>
			</view>
		</view>


		<!-- 退出登录 -->
		<view class="logout-section">
			<button class="logout-btn" @click="logout">退出登录</button>
		</view>
		<!-- 自定义TabBar -->
		<CustomTabbar />
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
	import IdentityAPI from '@/api/identity.js'
	import authManager from '@/utils/auth.js'
	
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				// 用户信息
				userInfo: {
					avatar: '/static/my/tomcat-plus.png',
					name: '',
					phone: ''
				},
				// 开发者工具显示控制
			}
		},
		methods: {
			// 跳转到个人信息页面
			goToPersonalInfo() {
				uni.navigateTo({
					url: '/pages/my/my-information/my-information',
					success: () => {
						console.log('跳转到个人信息页面');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 跳转到优惠券页面
			goToCoupons() {
				uni.navigateTo({
					url: '/pages/my/mycoupon/mycoupon'
				});
			},
			// 跳转到全部订单页面
			goToAllOrders() {
				uni.navigateTo({
					url: '/pages/other/my-repairorders/my-repairorders'
				});
			},
			// 跳转到订单状态页面
			goToOrders(status) {
				let statusText = '';
				switch(status) {
					case 'pending':
						statusText = '待支付';
						break;
					case 'using':
						statusText = '待使用';
						break;
					case 'evaluate':
						statusText = '待评价';
						break;
				}
				uni.showToast({
					title: `跳转到${statusText}页面`,
					icon: 'none'
				});
			},
			// 跳转到服务页面
			goToService(service) {
				let serviceText = '';
				switch(service) {
					case 'coupon':
						serviceText = '领券中心';
						uni.navigateTo({
							url: '/pages/my/coupon-center/coupon-center'
						});
						return; // 直接返回，不执行后面的toast
						break;
					case 'invite':
						serviceText = '邀请好友';
						break;
					case 'vehicle':
					    serviceText = '我的车辆';
					    uni.navigateTo({
					        url: '/pages/my/mycar/mycar'
					    });
					    return; // 直接返回，不执行后面的toast
					    break;
					case 'consumption':
						serviceText = '消费记录';
						uni.navigateTo({
							url: '/pages/my/consumptionrecords/consumptionrecords'
						});
						return; // 直接返回，不执行后面的toast
						break;
					case 'repair':
						serviceText = '我的维修';
						uni.navigateTo({
							url: '/pages/other/my-repairorders/my-repairorders'
						});
						return;
						break;
					case 'feedback':
						serviceText = '意见反馈';
						break;
					case 'address':
						serviceText = '收货地址';
						break;
					case 'message':
						serviceText = '实名认证';
						uni.navigateTo({
							url: '/pages/my/certification/certification'
						});
						return;
				}
				uni.showToast({
					title: `跳转到${serviceText}页面`,
					icon: 'none'
				});
			},
			
			// 退出登录
			logout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行退出登录
							authManager.logout();
							
							// 清空用户信息
							this.userInfo = {
								avatar: '/static/my/tomcat-plus.png',
								name: '',
								phone: ''
							};
							
							// 显示退出成功提示
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
							
							// 延迟跳转到登录页面
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								});
							}, 1500);
						}
					}
				});
			},
			// 加载用户信息
			async loadUserInfo() {
				try {
					// 获取用户ID
					const userId = authManager.getUserInfo()?.userId
					if (!userId) {
						console.log('用户未登录，使用默认信息')
						// 重置为默认信息
						this.userInfo = {
							avatar: '/static/my/tomcat-plus.png',
							name: '',
							phone: ''
						}
						return
					}

					console.log('正在加载用户信息，userId:', userId)

					// 获取用户完整信息（包括身份认证信息）
					const response = await IdentityAPI.getUserProfile(userId)
					console.log('用户完整信息响应:', response)
					console.log('响应数据结构:', {
						hasResponse: !!response,
						hasData: !!(response && response.data),
						dataKeys: response && response.data ? Object.keys(response.data) : [],
						nameValue: response && response.data ? response.data.name : 'undefined',
						phoneValue: response && response.data ? response.data.phone : 'undefined'
					})
					
					if (response && response.data) {
						this.userInfo = {
							avatar: response.data.avatar || '/static/my/tomcat-plus.png',
							name: response.data.name || '',
							phone: response.data.phone || ''
						}
						console.log('用户信息加载成功:', this.userInfo)
					} else {
						// 如果获取完整信息失败，尝试获取基本信息
						console.log('完整信息获取失败，尝试获取基本信息')
						const basicResponse = await IdentityAPI.getUserInfo(userId)
						console.log('基本信息响应:', basicResponse)
						
						if (basicResponse && basicResponse.data) {
							this.userInfo = {
								avatar: basicResponse.data.avatar || '/static/my/tomcat-plus.png',
								name: basicResponse.data.name || '',
								phone: basicResponse.data.phone || ''
							}
							console.log('基本信息加载成功:', this.userInfo)
						}
					}
				} catch (error) {
					console.error('加载用户信息失败:', error)
					// 发生错误时保持默认状态
					this.userInfo = {
						avatar: '/static/my/tomcat-plus.png',
						name: '',
						phone: ''
					}
				}
			},
			// 保存用户信息
			saveUserInfo() {
				uni.setStorageSync('userInfo', this.userInfo);
			}
		},
		onLoad() {
			// 页面加载时获取用户信息
			this.loadUserInfo();
		},
		onShow() {
			// 页面显示时刷新用户信息（从其他页面返回时）
			this.loadUserInfo();
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
		/* #ifdef H5 */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding-top: 20rpx;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.nav-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	/* 用户信息区域 */
	.user-profile-section {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding: 40rpx 30rpx;
		position: relative;
		overflow: hidden;
	}

	.user-profile-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 50 Q25 40 50 50 T100 50 V100 H0 Z" fill="rgba(255,255,255,0.1)"/></svg>');
		background-size: 200rpx 100rpx;
		background-repeat: repeat-x;
		opacity: 0.3;
	}

	.profile-content {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		z-index: 1;
	}

	.profile-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.avatar-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.profile-info {
		gap: 16rpx;
	}

	.user-name {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}

	.user-name.unverified {
		color: #ffeb3b;
		font-weight: 600;
		text-shadow: 0 0 10rpx rgba(255, 235, 59, 0.5);
	}

	.user-phone {
		color: rgba(255, 255, 255, 0.9);
		font-size: 28rpx;
	}

	/* 我的优惠券 */
	.coupon-section {
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.coupon-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.coupon-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.coupon-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.coupon-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.coupon-right {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.coupon-count {
		font-size: 26rpx;
		color: #666;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
	}

	/* 我的订单 */
	.orders-section {
		background-color: white;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.all-orders {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.all-orders-text {
		font-size: 26rpx;
		color: #666;
	}

	.order-status-buttons {
		display: flex;
		gap: 20rpx;
	}

	.status-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 20rpx 16rpx;
		border-radius: 15rpx;
		position: relative;
		overflow: hidden;
		height: 100rpx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.status-btn.blue {
		background-image: url('/static/my/组 9(0).png');
	}

	.status-btn.orange {
		background-image: url('/static/my/组 9(1).png');
	}

	.status-btn.light-blue {
		background-image: url('/static/my/组 9(2).png');
	}


	.status-text {
		color: white;
		font-size: 26rpx;
		font-weight: 500;
		text-align: center;
		z-index: 2;
		position: relative;
	}

	/* 我的服务 */
	.services-section {
		background-color: white;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}


	.services-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.service-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.service-icon.blue {
		background: linear-gradient(135deg, #ffffff 0%, #ffffff 0%);
	}

	.service-icon.green {
		background: linear-gradient(135deg, #ffffff 0%, #ffffff 0%);
	}

	.service-icon.orange {
		background: linear-gradient(135deg, #ffffff 0%, #ffffff 0%);
	}

	.service-icon.purple {
		background: linear-gradient(135deg, #ffffff 0%, #ffffff 0%);
	}

	.service-img {
		width: 40rpx;
		height: 40rpx;
	}

	.service-label {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		line-height: 1.2;
	}

	/* 退出登录 */
	.logout-section {
		padding: 40rpx 20rpx;
	}

	.logout-btn {
		width: 100%;
		height: 88rpx;
		background-color: #f0f0f0;
		border: none;
		border-radius: 44rpx;
		color: #666;
		font-size: 30rpx;
		font-weight: 500;
	}

	.logout-btn:active {
		background-color: #e0e0e0;
	}
</style>
